<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manage Trainee</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css" />
<script type="text/javascript" src="table.js"></script>
<script type="text/javascript" src="js/MasterJS.js"></script>
<script type="text/javascript">
	function viewTrainee(traineeId) {
		//alert(traineeId);
		document.forms[0].task.value = "viewTrainee";
		document.forms[0].traineeId.value = traineeId;
		document.forms[0].submit();
	}
	
	function reload(){
		var category= document.getElementsByName('category')[0].value;
		if(category=='1'){
			document.getElementById('showKeyword').style.display='none';
			document.getElementById('buttonSearch').style.display='none';
			document.getElementById('batch').style.display='';
			showTrainee();
		}else{
			document.getElementById('showKeyword').style.display='';
			document.getElementById('buttonSearch').style.display='';
			document.getElementById('batch').style.display='none';
			searchTrainee();
		}
	}

	function showTrainee() {
		var batch = document.getElementsByName('cModel.batch')[0].value;
		var task = 'showTrainee';

		document.getElementById('insertField').style.display = '';
		$.ajax({
			type : "POST",
			url : "/WebFinalProject/Candidate.do",
			data : "cModel.batch=" + batch + "&task=" + task,
			success : function(response) {
				$('#insertField').html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
		//showSessionCombo();
	}
	
	
	function searchTrainee() {
		var keyword = document.getElementsByName('keyword')[0].value;
		var category= document.getElementsByName('category')[0].value;
		var task = 'searchTrainee';

		document.getElementById('insertField').style.display = '';
		$.ajax({
			type : "POST",
			url : "/WebFinalProject/Candidate.do",
			data : "category=" + category + "&task=" + task+ "&keyword=" + keyword,
			success : function(response) {
				$('#insertField').html(response);
			},
			error : function(e) {
				alert('Error: ' + e);
			}
		});
		//showSessionCombo();
	}
</script>
</head>
<body onload="reload();">
	<center>
		<table width="100%" class="bodyTable boxShadow">

			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>

			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground" >User Management > Manage Trainee</td>
			</tr>
			<tr>
				<td align="center" class="contentStyle"><br> 
					<html:form	action="/Candidate" method="post">
						<html:hidden property="task" name="candidateForm" />
						<html:hidden property="traineeId" name="candidateForm" />
						<table width="95%" align="center" cellpadding="0" cellspacing="0">
							<tr>
								<td align="right">
									<table width="100%" class="boxShadow">
										<tr class="headerBox greyBackground">
											<td class="formListStyle rightAlign">
												Search By : &nbsp;
												<html:select property="category" name="candidateForm" onchange="reload();" styleClass="comboMedium">
													<html:option value="1">Batch</html:option>
													<html:option value="2">Full Name</html:option>
													<html:option value="3">User ID</html:option>
												</html:select>&nbsp;&nbsp;
<!-- 											</td> -->
<!-- 											<td class="formListStyle centerAlign"> -->
											<span id="showKeyword"><html:text property="keyword" styleClass="textLarge" name="candidateForm" /></span>
<!-- 											</td> -->
<!-- 											<td class="formListStyle rightAlign"> -->
											<input type="button"  style="padding:0px 3px;" class="buttonStyle" id="buttonSearch" value="Search All" onclick="javascript:searchTrainee();">
<!-- 											</td> -->
<!-- 											<td class="formListStyle"> -->
											<span id="batch">
												<html:select property="cModel.batch" name="candidateForm" styleClass="comboMedium" onchange="javascript:showTrainee();">
													<logic:notEmpty name="candidateForm" property="listBatch">
														<html:optionsCollection name="candidateForm" property="listBatch" label="batch" value="batchId" />
													</logic:notEmpty>
												</html:select>
											</span></td>
										</tr>
									</table><br>
								</td>
							</tr>							
							<tr id="insertField" class="formListBackground">
							</tr>
						</table>
						<br/>
					</html:form></td>
			</tr>

			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy;
					OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>



